<script>
export default {
  name: "ZhuangTaiTag",

  props: {
    state: {
      type: String,
    },
  },

  methods: {
    computeZhuangTaiClassName(state) {
      let stateMap = {
        // 培训
        未通知: "is-unknown",
        已通知: "is-underConstruction",
        // 已作废: "is-normal",

        // 会议
        已计划: "is-unknown",
        // 已通知: "is-underConstruction",
        已结束: "is-normal",
        已作废: "is-red",

        // 培训
        已延期: "is-yellow",
        已超期: "is-yellow",
        已完成: "is-underConstruction",
        已取消: "is-normal",
        等待中: "is-cyan",
        已执行: "is-unknown",
        已排课: "is-tobebuilt",

        // 应急管控
        正常: "is-domeaZaiyon",
        已备案: "is-domeaZaiyon",
        未备案: "is-normal",
        待修订: "is-yellow",
        // 应急管控_演练
        待执行: "is-yellow",
        // 已完成: "is-underConstruction",

        // 变更管理
        已验收: "is-domeaZaiyon",
        进行中: "is-unknown",
        待审批: "is-tobebuilt",
        待验收: "is-cyan",
        被驳回: "is-constructionDome",

        // 安全生产费用
        已提交: "is-unknown",
        审批中: "is-tonavy",
        审批通过: "is-underConstruction",

        // BBS计划
        未开始: "is-normal",
        // 进行中: "is-unknown",
        // 已完成: "is-underConstruction",

        // 隐患 行车日志
        未完成: "is-constructionDome",
      };
      let ret = (stateMap && stateMap[state]) || "";
      return ret;
    },
  },

  render(h) {
    let state = this.state;
    let name = state;
    if (state === "0") {
      name = "等待中";
    }
    if (state === "1") {
      name = "已延期";
    }
    if (state === "2") {
      name = "已完成";
    }
    if (state === "3") {
      name = "已取消";
    }
    return (
      <div class={`tag-zhuangtai ${this.computeZhuangTaiClassName(name)}`}>
        {name}
      </div>
    );
    // return (
    //   <div class={`tag-zhuangtai ${this.computeZhuangTaiClassName(state)}`}>
    //     {state}
    //   </div>
    // )
  },

  // render(h) {
  //   let state = this.state
  //   let name = ""
  //   if (state === "0") {
  //     name = "未通知"
  //   }
  //   if (state === "1") {
  //     name = "已通知"
  //   }
  //   return (
  //     <div class={`tag-zhuangtai ${this.computeZhuangTaiClassName(name)}`}>
  //       {name}
  //     </div>
  //   )
  // },
};
</script>

<style lang="scss" scoped>
@mixin tagStyle($color, $bg) {
  color: $color;
  background: $bg;
}

.tag-zhuangtai {
  display: inline-block;
  width: 70%;
  height: 22px;
  line-height: 22px;
  border-radius: 3px;
  text-align: center;

  &.is-red {
    @include tagStyle(#fff, red);
  }

  &.is-normal {
    @include tagStyle(#fff, rgba(166, 166, 166, 1));
  }

  &.is-tobebuilt {
    @include tagStyle(#fff, rgb(7 169 240));
  }

  &.is-constructionDome {
    @include tagStyle(#fff, rgb(201, 52, 52));
  }

  &.is-underConstruction {
    @include tagStyle(#fff, rgb(100, 151, 3));
  }

  &.is-domeaZaiyon {
    @include tagStyle(#fff, rgb(44, 247, 115));
  }

  &.is-unknown {
    @include tagStyle(#fff, rgb(236, 120, 4));
  }

  &.is-cyan {
    @include tagStyle(rgb(56, 71, 87), rgb(66, 234, 243));
  }

  &.is-yellow {
    @include tagStyle(rgb(56, 71, 87), yellow);
  }

  &.is-tonavy {
    @include tagStyle(#fff, rgb(0, 0, 128));
  }
}
</style>
